<template>
  <page-header-wrapper>
    <a-card>
      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData= {} }">
        <JeepaySearchInfoInput v-model:value="vdata.searchData['mchNo']" placeholder="商户号" :textUpStyle="true" :mchNoAndName="true" showType="MCH" />

        
        <jeepay-text-up v-model:value="vdata.searchData['appId']" :placeholder="'应用AppId'" />
        <jeepay-text-up v-model:value="vdata.searchData['appName']" :placeholder="'应用名称'" />
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData['state']" placeholder="状态">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="0">禁用</a-select-option>
            <a-select-option value="1">启用</a-select-option>
          </a-select>
        </a-form-item>
      </JeepaySearchForm>
     
      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :initData="false"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="vdata.searchData"
        rowKey="appId"
        @btnLoadClose="vdata.btnLoading=false"
      >
        <template #topBtnSlot>
          <a-button v-if="$access('ENT_MCH_APP_ADD')" type="primary" class="mg-b-30" @click="addFunc"><plus-outlined />新建</a-button>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'appId'">
            <b>{{ record.appId }}</b>
          </template> <!-- 自定义插槽 -->
          <template v-if="column.key === 'state'">
            <a-badge :status="record.state === 0?'error':'processing'" :text="record.state === 0?'禁用':'启用'" />
          </template>

          <template v-if="column.key === 'defaultFlag'">
            <a-badge :status="record.defaultFlag === 0?'error':'processing'" :text="record.defaultFlag === 0?'否':'是'" />
          </template>

          <template v-if="column.key === 'op'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns>
              <a-button v-if="$access('ENT_MCH_APP_EDIT')" type="link" @click="editFunc(record.appId)">修改</a-button>

              <a-button v-if="$access('ENT_MCH_APP_PAY_CONFIG')" type="link" @click="showPayIfConfigList(record.appId, record.mchType == 2)">支付配置</a-button>
              <a-button v-if="$access('ENT_MCH_APP_PAY_CONFIG') && record.mchType == 1" type="link" @click="jeepayOauth2ConfigDrawer.show(record.appId, record.mchType == 2)">oauth2</a-button>
              <a-button v-if="$access('ENT_MCH_APP_PAY_CONFIG') && record.mchType == 2" type="link" @click="jeepayOauth2ConfigDrawer.show(record.appId, record.mchType == 2)">小程序支付配置</a-button>
              <a-button v-if="$access('ENT_MCH_APP_DEL')" type="link" style="color: red" @click="delFunc(record.appId)">删除</a-button>
            </JeepayTableColumns>
          </template>
        </template>
      </JeepayTable>
    </a-card>
    <!-- 新增应用  -->
    <MchAppAddOrEdit ref="mchAppAddOrEdit" :callbackFunc="searchFunc" />

    <!-- 费率配置页面  -->
    <JeepayPayConfigDrawer ref="jeepayPayConfigDrawerRef" configMode="mgrMch" />

    <!-- oauth2配置  -->
    <JeepayOauth2ConfigDrawer ref="jeepayOauth2ConfigDrawer" configMode="mgrMch" />
  </page-header-wrapper>
</template>

<script setup lang="ts">
import { API_URL_MCH_APP, req } from '@/api/manage'
import MchAppAddOrEdit from './AddOrEdit.vue'
import {ref, reactive, onMounted, getCurrentInstance, provide,  computed} from 'vue'

import { useRoute } from 'vue-router'

const jeepayOauth2ConfigDrawer = ref()


const tableColumns = reactive([
  { key: 'appId', title: '应用AppId',  },
  { key: 'appName', title: '应用名称', dataIndex: 'appName', },
  { key: 'mchNo', title: '商户号', dataIndex: 'mchNo',  },
  { key: 'state', title: '状态',  },
  { key: 'defaultFlag', title: '默认',  },
  { key: 'createdAt', title: '创建日期', dataIndex: 'createdAt', },
  { key: 'op', title: '操作',   fixed: 'right', align: 'center' }
])

const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

const infoTable = ref()

const vdata = reactive({
  btnLoading: false,
  searchData: {},
  configMchAppIsIsvsubMch: false, // 配置商户应用是否是： 特约商户
})

// 向下注入： 是否当前配置的是 特约商户。 
provide('configMchAppIsIsvsubMch', computed( () => vdata.configMchAppIsIsvsubMch))

const queryFunc = () => {
  
  vdata.btnLoading = true
  infoTable.value.refTable(true)
}
  
onMounted(() => {
  vdata.searchData['mchNo'] = useRoute().query.mchNo
  queryFunc()
})

// 请求table接口数据
  function reqTableDataFunc (params) {
    return req.list(API_URL_MCH_APP, params)
  }
  const searchFunc = function () { // 点击【查询】按钮点击事件
    infoTable.value.refTable(true)
  }

  const mchAppAddOrEdit = ref()
  const addFunc = function () { // 业务通用【新增】 函数
    mchAppAddOrEdit.value.show(vdata.searchData['mchNo'])
  }

  const editFunc = function (recordId) { // 业务通用【修改】 函数
    mchAppAddOrEdit.value.show(vdata.searchData['mchNo'], recordId)
  }

  const delFunc = (appId) => {
    $infoBox.confirmDanger('确认删除？', '', () => {
      req.delById(API_URL_MCH_APP, appId).then(res => {
        infoTable.value.refTable(true)
        $infoBox.message.success('删除成功！')
        // $infoBox.searchFunc()
      })
    })
  }

  const jeepayPayConfigDrawerRef = ref()
  const showPayIfConfigList = function (recordId, configMchAppIsIsvsubMch) { // 支付参数配置

    vdata.configMchAppIsIsvsubMch = configMchAppIsIsvsubMch

    jeepayPayConfigDrawerRef.value.show(recordId)
  }

</script>
